<template>
    <a-form ref="formRef" :model="model" :rules="rules" v-bind="formItemLayout">
        <a-row :gutter="10">
            <a-col :span="16">
                <a-form-item label="附件类别" name="attachmentType">
                    <a-select v-model:value="model.attachmentType" :options="attachmentTypeOptions" placeholder="请选择附件类别"/>
                </a-form-item>
            </a-col>
            <a-col :span="16">
                <a-form-item label="适用范围" name="attachmentFiles">
                    <a-upload-dragger 
                    v-model::file-list="model.attachmentFiles" 
                    name="files" 
                    :progress="uploadProgress"
                    :before-upload="beforeUpload" 
                    action="/api/upload">
                        <p class="ant-upload-drag-icon">
                            <InboxOutlined />
                        </p>
                        <p class="ant-upload-text">将文件拖到此处，或点击上传</p>
                    </a-upload-dragger>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang='ts' setup>
    import { ref, computed } from 'vue';
    import { InboxOutlined } from '@ant-design/icons-vue'
    import { UploadProps } from 'ant-design-vue';

    defineOptions({
        /** 上传附件表单 */
        name: 'FileUploadForm',
    });

    const model = defineModel({
        type: Object, // 类型检查
        required: true, // 是否必填
        // 默认值
        default: {
            attachmentType: '', // 附件类别
            attachmentFiles: [],
        }, 
    });
    
    const formRef = ref();

    const rules = ref({
        attachmentType: [{ required: true, type: 'string', message: '请选择附件类别', trigger: 'change' }],
    })
    // "emit('update:modelValue', $event.target.value)"
    const formItemLayout = ref({
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    });
    const attachmentTypeOptions = computed(() => {
        return [
            { label: '主文件', value: '01' },
            { label: '其他附件', value: '02' },
        ]
    })
    // 上传进度
    const uploadProgress: UploadProps['progress'] = {
        strokeColor: {
            '0%': '#108ee9',
            '100%': '#87d068',
        },
        strokeWidth: 3,
        format: percent => `${parseFloat(percent.toFixed(2))}%`,
        class: 'test',
    };
    // 上传前处理
    const beforeUpload: UploadProps['beforeUpload'] = file => {
        return file;
        // return new Promise(resolve => {
        //     const reader = new FileReader();
        //     reader.readAsDataURL(file);
        //     reader.onload = () => {
        //         const img: HTMLImageElement = document.createElement('img');
        //         img.src = reader.result as string;
        //         img.onload = () => {
        //             const canvas = document.createElement('canvas');
        //             canvas.width = img.naturalWidth;
        //             canvas.height = img.naturalHeight;
        //             const ctx = canvas.getContext('2d');
        //             ctx.drawImage(img, 0, 0);
        //             ctx.fillStyle = 'red';
        //             ctx.textBaseline = 'middle';
        //             ctx.font = '33px Arial';
        //             ctx.fillText('Ant Design Vue', 20, 20);
        //             canvas.toBlob(resolve);
        //         };
        //     };
        // });
    };




    function validate() {
        return new Promise((resolve) => {
            formRef.value.validate().then((values) => {
                console.log('values', values);
                resolve({valid: true, values});
            })
            .catch(error => {
                console.log('error', error);
                resolve({valid: false, values: error?.values});
            });
        })
    }
    // 对外暴露属性方法
    defineExpose({
        validate,
    });

</script>

<style scoped lang="less">
</style>